<!DOCTYPE html>

<html land="es">
<head>
 <style type="text/css">

.drag{
position:relative;
cursor:hand;
z-index: 100;
}

</style>

<script type="text/javascript">
var dragobject={
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,
initialize:function(){
document.onmousedown=this.drag
document.onmouseup=function(){this.dragapproved=0}
},
drag:function(e){
var evtobj=window.event? window.event : e
this.targetobj=window.event? event.srcElement : e.target
if (this.targetobj.className=="drag"){
this.dragapproved=1
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove=dragobject.moveit
}
},
moveit:function(e){
var evtobj=window.event? window.event : e
if (this.dragapproved==1){
this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
//document.writeln(this.targetobj.offsetLeft)
if (this.targetobj.offsetLeft > 2000) {
	this.targetobj.style.visibility ="hidden"
}

if (this.targetobj.offsetLeft < 0) {
	this.targetobj.style.visibility ="hidden"
}

//this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
return false
}
}
}

dragobject.initialize()

</script>

</head>
<body>
 <header>
  <h1> Un ejemplo del uso de Drag & Drop en HTML5 </h1>
 </header>

<div  style="background-color:#FFFF00; height:200px; width:400px; margin:auto; position:absolute; top:50px; left:500px;">
 <h1 class="drag""> as
   
  dasdasdHolaasdsdasdkaskdjasd
asd
asdasd
as
das
dasdasdasdsññkaskñsdasldkasñldkasñdklasd
sdsssssssssssssssssssssssssssssssssssssss
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddd</h1></div>
<div class="drag" style="background-color:#000000; height:200px; width:400px; margin:auto; position:absolute; top:50px; left:500px;">Hola</div>
</body>
</html>